import React, { Component, ComponentClass } from 'react';
import Taro from '@tarojs/taro';
import {View, Image, Text, Block} from '@tarojs/components'
import {AtTabs, AtIcon} from 'taro-ui'
import {
  SUPPLIER_GOODS_DETAIL, SUPPLIER_GOODS_DETAIL_QIANGGOU
} from "../../constants/api";
import {deepClone, vcmonitor} from "../../utils/tools";
import {http} from '../../utils/http'
import {getContent} from "../../utils/handlerPublicCode";
import './index.scss';

type StateProps = {
  isFlashSale: boolean
  isMailGoods: boolean
  detail: any
  current: any
  addShow: any
  isHotel: boolean
}

class productList extends Component {
  state: StateProps = {
    isFlashSale: false,
    isMailGoods: false,
    current: 0,
    detail: {
      arr: []
    },
    addShow: false,
    isHotel: false
  }

  async componentDidShow() {
    vcmonitor(this)
  }

  async componentDidMount() {
    const query: any = Taro.getCurrentInstance().router.params;
    const {id, type, sale_style, isMailGoods} = query;
    Taro.showLoading({title: '加载中...'});
    let api = ''
    let params = {}
    if (type === '限时抢购') {
      api = SUPPLIER_GOODS_DETAIL_QIANGGOU
      params = {
        goodsId: id,
      }
    } else {
      api = SUPPLIER_GOODS_DETAIL
      params = {
        type: 'move',
        goodsId: id,
        tadpole_goods_type: type
      }
    }
    const res = await http.HGet(api, params);
    let specification = []
    if (type === '限时抢购') {
      res.data = JSON.parse(res.data)
      specification.push(deepClone(res.data))
      const garbageArr = ['address', 'area_id', 'city_id', 'goods_lightspot', 'img', 'link_phone', 'mealDetails',
        'name', 'site', 'specification', 'status', 'tadpole_goods_index', 'tadpole_goods_type', 'tadpole_site', 'type']
      for (let k in garbageArr) {
        delete specification[0][garbageArr[k]]
      }
      res.data.sonGoodsArr = specification
      res.data.hostImgArr = res.data.img
      res.data.tadpoleSiteName = res.data.tadpoleSiteName
    } else {
      res.data.sonGoodsArr = res.data.sonGoodsArr || [];
    }
    for (let i = 0; res.data.sonGoodsArr[i]; i++) {
      const item = res.data.sonGoodsArr[i].custom_item_config;
      const {idcard, address, comments, upload_file, mark, face, name, phone} = item;
      let str = '';
      if (idcard) {
        str += '身份证, ';
      }
      if (address) {
        str += '邮寄地址, ';
      }
      if (comments) {
        str += '备注, ';
      }
      if (upload_file) {
        str += '图片, ';
      }
      if (mark) {
        str += '留言, ';
      }
      if (face) {
        str += '人脸识别, ';
      }
      if (name) {
        str += '姓名, ';
      }
      if (name) {
        str += '手机号, ';
      }

      for (let i = 0; item[`field_${i}`]; i++) {
        str += `${item[`field_${i}`].k}, `
      }
      str = str.substr(0, str.length - 2);
      res.data.sonGoodsArr[i].custom_item_config_name = str;
    }
    this.setState({
      detail: {
        ...res.data,
        arr: [],
        sale_style,
        sale_style_name: sale_style == 0 ? '日历票' : '抢购模式'
      },
      isHotel: res.data.tadpole_goods_type == '酒店民宿',
      isMailGoods: res.data.tadpole_goods_type == '邮寄商品',
      isFlashSale: res.data.tadpole_goods_type == '限时抢购',
    });
    Taro.hideLoading();
  }

  handleClick(value) {
    this.setState({
      current: value
    })
  }

  previewImage(url, imageGroup) {
    imageGroup = imageGroup.map(item => {
      return item.url;
    })
    Taro.previewImage({
      urls: imageGroup,
      current: url
    })
  }

  render() {
    const {detail, detail: {arr}, current, addShow, isHotel, isMailGoods, isFlashSale} = this.state;
    return (
      <View className='product-detail'>
        <View className='product-detail-item-wrap'>
          <View className='product-detail-item'>
            <View className='product-detail-item-right'>{detail.process_status}</View>
            <View className='product-detail-item-name'>{detail.name}</View>
            {detail.add_date && <View className='product-detail-item-content2 m-b-3'>
              创建时间：{detail.add_date}
            </View>}
            <View className='product-detail-item-content2 m-b-3'>
              {detail.tadpoleSiteName && <Text>
                所属站点：{detail.tadpoleSiteName}
              </Text>}
            </View>
            {detail.company && <View className='product-detail-item-content2 m-b-3'>
              所属商家：{detail.company}
            </View>}
            {!isMailGoods && detail.supplierCheckerGroupName && <View className='product-detail-item-content2 m-b-3'>
              所属门店：{detail.supplierCheckerGroupName}
            </View>}
            {!isMailGoods && detail.areaStr && <View className='product-detail-item-content2 m-b-3'>
              所属地区：{detail.areaStr}
            </View>}
            {!isMailGoods && detail.address && <View className='product-detail-item-content2 m-b-3'>
              {detail.address && <Text>所属地址：{detail.address}</Text>}
            </View>}
            {isHotel &&
            <Block>
              {detail.brandName && <View className='product-detail-item-content2 m-b-3'>
                品牌：{detail.brandName}
              </View>}
              {detail.starName && <View className='product-detail-item-content2 m-b-3'>
                星级：{detail.starName}
              </View>}
            </Block>
            }
            {detail.tadpole_goods_type && <View className='product-detail-item-content2 m-b-3'>
              产品类型：{detail.tadpole_goods_type}
            </View>}
            {!isFlashSale && detail.sale_style_name && <View className='product-detail-item-content2 m-b-3'>
              模式：{detail.sale_style_name}
            </View>}
            {detail.all_project && <View className='product-detail-item-content2 m-b-3'>
              包含项目：{detail.all_project}
            </View>}
            {detail.hostImgArr && detail.hostImgArr.length > 0 && <View className='product-detail-item-content2'>
              产品图片：
            </View>}
            <View>
              {
                detail.hostImgArr && detail.hostImgArr.map((item) => <Image
                  style='vertical-align: top;width: 28.3%;height: 100px;background: #fff; margin: 0 5px;margin-bottom: 5px;'
                  src={item.url}
                  onClick={() => this.previewImage(item.url, detail.hostImgArr)}
                />)
              }
            </View>
            {addShow &&
            <View>
              {
                (detail.attention_matter ||
                  detail.use_notice ||
                  detail.detail_intro ||
                  detail.goods_lightspot) &&
                <View className='product-detail-item-title'>文本信息</View>
              }
              {!isMailGoods && detail.mealDetails && <View className='product-detail-item-content2 m-b-5'>
                套餐详情：{process.env.TARO_ENV === "tt" && <rich-text preview selectable nodes={getContent(detail.mealDetails)} />}{process.env.TARO_ENV === "weapp" && <parser selectable html={detail.mealDetails || ''} />}{process.env.TARO_ENV === "h5" && <View dangerouslySetInnerHTML={{__html: detail.mealDetails}} />}
              </View>}
              {detail.attention_matter && <View className='product-detail-item-content2 m-b-5'>
                注意事项：{detail.attention_matter}
              </View>}
              {detail.use_notice && <View className='product-detail-item-content2 m-b-5'>
                购买须知：{process.env.TARO_ENV === "tt" && <rich-text preview selectable nodes={getContent(detail.use_notice)} />}{process.env.TARO_ENV === "weapp" && <parser selectable html={detail.use_notice || ''} />}{process.env.TARO_ENV === "h5" && <View dangerouslySetInnerHTML={{__html: detail.use_notice}} />}
              </View>}
              {detail.detail_intro && <View className='product-detail-item-content2'>
                详细介绍：{process.env.TARO_ENV === "tt" && <rich-text preview selectable nodes={getContent(detail.detail_intro)} />}{process.env.TARO_ENV === "weapp" && <parser selectable html={detail.detail_intro || ''} />}{process.env.TARO_ENV === "h5" && <View dangerouslySetInnerHTML={{__html: detail.detail_intro}} />}
              </View>}
              {detail.goods_lightspot && <View className='product-detail-item-content2 m-b-3'>
                产品卖点：{detail.goods_lightspot}
              </View>}
            </View>
            }
            <View
              className='t-a-c c-r-p m-tb-20 look-info b-b'
              onClick={
                () => {
                  this.setState({
                    addShow: !addShow
                  })
                }
              }
            >
              {
                (detail.attention_matter ||
                  detail.use_notice ||
                  detail.detail_intro ||
                  detail.goods_lightspot) &&
                !addShow &&
                <View>
                  查看文本信息
                  <AtIcon value='chevron-down' size='14' color='#B6B6B7' />
                </View>
              }
              {
                addShow &&
                <View>
                  隐藏文本信息
                  <AtIcon value='chevron-up' size='14' color='#B6B6B7' />
                </View>
              }
            </View>
            {!isFlashSale && <AtTabs
              scroll
              current={current}
              tabList={detail.sonGoodsArr}
              onClick={this.handleClick.bind(this)}
            >
            </AtTabs>}
            {
              detail.sonGoodsArr && detail.sonGoodsArr.map((item, tabIndex) => (
                (tabIndex == current &&
                  <View className='white'>
                    <View className='product-detail-item-title'>基本信息</View>
                    <View>
                      {item.item_name && <View className='product-detail-item-content2 m-b-5'>
                        规格名称：{item.item_name}
                      </View>}
                      {item.notice && <View className='product-detail-item-content2 m-b-5'>
                        购买须知：{item.notice}
                      </View>}
                      {!isMailGoods && item.sell_begin && <View className='product-detail-item-content2 m-b-5'>
                        售卖开始时间：{item.sell_begin} 至 {item.sell_end}
                      </View>}
                      {item.is_collage && <View className='product-detail-item-content2 m-b-5'>
                        是否拼团：{item.is_collage == true ? '是' : '否'}
                      </View>}
                      <View className='product-detail-item-content2 m-b-5'>
                        客户信息填写：{item.is_custom_item == 0 ? '只填写一人' : '多人'}
                      </View>
                      {item.custom_item_config_name && <View className='product-detail-item-content2'>
                        客户预留信息：{item.custom_item_config_name}
                      </View>}
                      {!isMailGoods && item.get_ticket_way_name && <View className='product-detail-item-content2 m-b-3 b-b'>
                        取票方式：{item.get_ticket_way_name}
                      </View>}
                      {
                        detail.sale_style == 1 &&
                        <View className='product-detail-item-content2 m-b-3 b-b'>
                          {!isMailGoods && (detail.sonGoodsArr[current].sell_begin || detail.sonGoodsArr[current].sell_end) &&
                          <View className='2 m-b-5'>
                            售卖时间范围：
                            {detail.sonGoodsArr[current].sell_begin && detail.sonGoodsArr[current].sell_begin || ''}
                            {detail.sonGoodsArr[current].sell_end && ` 至 ${detail.sonGoodsArr[current].sell_end}` || ''}
                          </View>}
                          {(detail.sonGoodsArr[current].price || detail.sonGoodsArr[current].price) &&
                          <View className='2 m-b-5'>
                            窗口价：{detail.sonGoodsArr[current].price || ''}
                          </View>}
                          {(detail.sonGoodsArr[current].seller_price || detail.sonGoodsArr[current].seller_price) &&
                          <View className='2 m-b-5'>
                            销售价：{detail.sonGoodsArr[current].seller_price || ''}
                          </View>}
                          {(detail.sonGoodsArr[current].supplier_price || detail.sonGoodsArr[current].supplier_price) &&
                          <View className='2 m-b-5'>
                            成本价格：{detail.sonGoodsArr[current].supplier_price || ''}
                          </View>}
                          {(detail.sonGoodsArr[current].stock || detail.sonGoodsArr[current].stock) &&
                          <View className='2 m-b-5'>
                            限购库存：{detail.sonGoodsArr[current].stock || ''}
                          </View>}
                        </View>
                      }
                    </View>
                    {detail.sale_style == 0 &&
                    <View>
                      <View className='product-detail-item-title'>日历价格</View>
                      {
                        item.calendarArray && item.calendarArray.map(items => (
                          <View className='box'>
                            {!isMailGoods && (items.date_scope_start || items.date_scope_end) &&
                            <View className='product-detail-item-content2 m-b-5'>
                              售卖时间范围：
                              {items.date_scope_start && items.date_scope_start || ''}
                              {items.date_scope_end && ` 至 ${items.date_scope_end}` || ''}
                            </View>}
                            {!isMailGoods && items.weekStr && <View className='product-detail-item-content2 m-b-5'>
                              时间选择：{items.weekStr}
                            </View>}
                            {(items.price || items.price) && <View className='product-detail-item-content2 m-b-5'>
                              窗口价：{items.price || ''}
                            </View>}
                            {(items.seller_price || items.seller_price) &&
                            <View className='product-detail-item-content2 m-b-5'>
                              销售价：{items.seller_price || ''}
                            </View>}
                            {(items.supplier_price || items.supplier_price) &&
                            <View className='product-detail-item-content2 m-b-5'>
                              成本价格：{items.supplier_price || ''}
                            </View>}
                            {(items.stock || items.stock) && <View className='product-detail-item-content2 m-b-5'>
                              限购库存：{items.stock || ''}
                            </View>}
                          </View>
                        ))
                      }
                    </View>
                    }
                    {!isMailGoods && (item.use_rule.is_child || item.use_rule.child_age || item.use_rule.child_stature || item.use_rule.concreteness_cost ||
                      item.use_rule.is_holidays || item.reserve_date_style_name) &&
                    <View className='b-b'>
                      <View className='product-detail-item-title'>使用规则</View>
                      {((item.use_rule.is_child && !isHotel) || '') &&
                      <View className='product-detail-item-content2 m-b-5'>
                        儿童限制：{item.use_rule.is_child ? '是' : '否'}
                      </View>}
                      {item.use_rule.child_age && <View className='product-detail-item-content2 m-b-5'>
                        身高：{`${item.use_rule.child_stature}cm`}
                      </View>}
                      {item.use_rule.child_stature && <View className='product-detail-item-content2 m-b-5'>
                        年龄：{`${item.use_rule.child_age}岁`}
                      </View>}
                      {item.use_rule.concreteness_cost && <View className='product-detail-item-content2 m-b-5'>
                        人数增加费用：{item.use_rule.concreteness_cost ? `￥ ${item.use_rule.concreteness_cost}` : '否'}
                      </View>}
                      {item.valid_type_name && <View className='product-detail-item-content2 m-b-5'>
                        可用日期：{item.valid_type_name}
                      </View>}
                      {item.reserve_date_style_name && <View className='product-detail-item-content2 m-b-5'>
                        购买设置：{item.reserve_date_style_name}
                      </View>}
                    </View>}
                    {!isMailGoods && item.order_limit == 1 && <View>
                      <View className='product-detail-item-title'>下单限制</View>

                      <View className='product-detail-item-content2 m-b-5'>
                        账号限制：{`${(item.order_limit_config.account.day || item.order_limit_config.account.orderCount || item.order_limit_config.account.count) && '同一账号' || ''}
                          ${item.order_limit_config.account.day && `${item.order_limit_config.account.day}天内` || ''}
                          ${item.order_limit_config.account.count && `最多购买${item.order_limit_config.account.count}份` || ''}
                          ${item.order_limit_config.account.orderCount && `最多购买${item.order_limit_config.account.orderCount}单` || ''}
                          ${!item.order_limit_config.account.count && !item.order_limit_config.account.orderCount && !item.order_limit_config.account.day && '无限制' || ''}
                      `}
                      </View>

                      <View className='product-detail-item-content2 m-b-5'>
                        身份证限制：{`${(item.order_limit_config.idcard.day || item.order_limit_config.idcard.orderCount || item.order_limit_config.idcard.count) && '同一身份证' || ''}
                          ${item.order_limit_config.idcard.day && `${item.order_limit_config.idcard.day}天内` || ''}
                          ${item.order_limit_config.idcard.count && `最多购买${item.order_limit_config.idcard.count}份` || ''}
                          ${item.order_limit_config.idcard.orderCount && `最多购买${item.order_limit_config.idcard.orderCount}单` || ''}
                          ${!item.order_limit_config.idcard.count && !item.order_limit_config.idcard.orderCount && !item.order_limit_config.idcard.day && '无限制' || ''}
                      `}
                      </View>

                      <View className='product-detail-item-content2 m-b-5'>
                        手机号限制：{`${(item.order_limit_config.phone.day || item.order_limit_config.phone.orderCount || item.order_limit_config.phone.count) && '同一手机号' || ''}
                          ${item.order_limit_config.phone.day && `${item.order_limit_config.phone.day}天内` || ''}
                          ${item.order_limit_config.phone.count && `最多购买${item.order_limit_config.phone.count}份` || ''}
                          ${item.order_limit_config.phone.orderCount && `最多购买${item.order_limit_config.phone.orderCount}单` || ''}
                          ${!item.order_limit_config.phone.count && !item.order_limit_config.phone.orderCount && !item.order_limit_config.phone.day && '无限制' || ''}
                      `}
                      </View>

                      <View className='product-detail-item-content2 m-b-5'>
                        每笔订单限制：
                        {
                          `
                            ${item.order_limit_config.order.min && !item.order_limit_config.order.max && `每笔订单最少${item.order_limit_config.order.min}份` || ''}
                            ${item.order_limit_config.order.max && !item.order_limit_config.order.min && `每笔订单最多${item.order_limit_config.order.max}份` || ''}
                            ${
                            item.order_limit_config.order.min && item.order_limit_config.order.max &&
                            `每笔订单最少${item.order_limit_config.order.min}份最多${item.order_limit_config.order.max}份` || ''
                          }
                            ${!item.order_limit_config.order.max && !item.order_limit_config.order.min && '无限制' || ''}
                          `
                        }
                      </View>
                      {!isHotel && <View className='product-detail-item-content2 m-b-5'>
                        年龄限制：
                        {
                          item.order_limit_config.age.min &&
                          item.order_limit_config.age.max && `${item.order_limit_config.age.min}至${item.order_limit_config.age.max}岁` || ''
                        }
                        {
                          item.order_limit_config.age.min && !item.order_limit_config.age.max && `${item.order_limit_config.age.min}岁` || ''
                        }
                        {
                          item.order_limit_config.age.max && !item.order_limit_config.age.min && `${item.order_limit_config.age.max}岁` || ''
                        }
                        {
                          !item.order_limit_config.age.max && !item.order_limit_config.age.min && '无限制' || ''
                        }
                      </View>}
                      {item.order_limit_config.idcard_region && !isHotel &&
                      <View className='d-flex product-detail-item-content2 b-b'>
                        区域限制：
                        <View>
                          {
                            item.order_limit_config.idcard_region && item.order_limit_config.idcard_region.map(item => (
                              <View className='area'>{item.add}</View>
                            ))
                          }
                          {
                            !item.order_limit_config.idcard_region[0].add && '无限制' || ''
                          }
                        </View>
                      </View>}
                    </View>}

                    <View className='product-detail-item-title'>退票规则</View>
                    <View className='product-detail-item-content2 m-b-5'>
                      退票规则：{item.is_allow_refund_name}
                    </View>
                    <View className='product-detail-item-content2 m-b-5'>
                      产品结算方式：{item.settlement_way_name || ''}
                    </View>
                    {detail.sale_style == 1 && <View className='product-detail-item-content2 m-b-5'>
                      参与拼团：{item.use_rule.is_collage == 1 ? '是' : '否'}
                    </View>}
                    {!isMailGoods && detail.sale_style == 1 && <View className='product-detail-item-content2 m-b-5'>
                      是否需预约：{item.use_rule.is_appointment == 1 ? '是' : '否'}
                    </View>}
                    {!isMailGoods && <View className='product-detail-item-content2 m-b-5'>
                      节假日可用：{item.use_rule.is_holidays == 1 ? '是' : '否'}
                    </View>}
                    <View className='product-detail-item-content2 m-b-5'>
                      使用系统：{item.tadpole_use_system_name || ''}
                    </View>
                    <View className='product-detail-item-content2 m-b-5'>
                      开票金额：{item.ticket_money_name || ''}
                    </View>
                    <View className='product-detail-item-content2 m-b-5'>
                      商家类型：{item.tadpole_open_type_name || ''}
                    </View>
                  </View>
                )
              ))
            }
          </View>
        </View>
        <View style='height: 17px;' />
      </View>
    )
  }
}

export default productList as ComponentClass;
